<html>
  <head>
    <title>Home</title>
    <script th:src="@{/webjars/sockjs-client/0.3.4/sockjs.min.js}"></script>
    <script th:src="@{/webjars/stomp-websocket/2.3.0/stomp.min.js}"></script>
    <script th:src="@{/webjars/jquery/2.0.3/jquery.min.js}"></script>
  </head>
  <body>
    <button id="stop">Stop</button>
  
    <script th:inline="javascript">
      var sock = new SockJS([[@{/marcopolo}]]);
      var stomp = Stomp.over(sock);

      stomp.connect('guest', 'guest', function(frame) {
        console.log('*****  Connected  *****');
        stomp.subscribe("/topic/marco", handlePolo);
        sayMarco();
      });
      
      function handleOneTime(message) {
        console.log('Received: ', message);
      }

      function handlePolo(message) {
        console.log('Received: ', message);
        $('#output').append("<b>Received: " + 
            JSON.parse(message.body).message + "</b><br/>")
        if (JSON.parse(message.body).message === 'Polo!') {
          setTimeout(function(){sayMarco()}, 2000);
        }
      }
      
      function handleErrors(message) {
        console.log('RECEIVED ERROR: ', message);
        $('#output').append("<b>GOT AN ERROR!!!: " + 
            JSON.parse(message.body).message + "</b><br/>")
      }

      function sayMarco() {
        console.log('Sending Marco!');
        stomp.send("/app/marco", {}, 
            JSON.stringify({ 'message': 'Marco!' }));
        $('#output').append("<b>Send: Marco!</b><br/>")
      }

      $('#stop').click(function() {sock.close()});
      </script>
    
    <div id="output"></div>
  </body>
</html>
